<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省份城市二级联动</title>
</head>
<body>
    <select id="province"></select>
    <select id="city"></select>
    <script>
        let provinces = ["四川","广东","湖南"];
        let cities = [
            ["成都","绵阳","德阳"],
            ["广州","东莞","深圳"],
            ["长沙","浏阳","岳阳"]
        ];
        let province = document.getElementById("province");
        let city = document.getElementById("city");

        let fill = function(arr,select){
            for(let i = 0;i < arr.length;i++){
                select.add(new Option(arr[i],i));
            }
        }
        // 填充省份
        fill(provinces,province);
        // 填充城市
        fill(cities[province.value],city);
        province.onchange = function(){
            city.options.length = 0;
           // 填充城市
            fill(cities[this.value],city);
        }

    </script>
</body>
</html>